<template>
	<view style="display: flex;flex-direction: row;">
		<!-- 左侧边栏 -->
		<div
			style="display: flex;flex-direction: column;width: 20%;height: 650rpx;justify-content: space-around;align-items: center;">
			<div v-for="(item,index) in categoryList">
				<div @click="zz(item.id,index)" :class='{abc : index==fuk}' style="height: 50rpx;width: 140rpx;text-align: center;">
					{{item.name}}
				</div>
			</div>
		</div>
		<!-- 右边侧边栏 -->
		<div style="display: flex;flex-direction: column;width: 80%;">
			<div>
				<img :src="pic.picUrl" alt="" style="width: 100%;height: 200rpx;">
			</div>
			<div>
				<div style="display: flex;justify-content: center;">
					{{pic.desc}}
				</div>
			</div>
			<!-- 商品 -->
			<div style="display: flex;justify-content: center;width: 100%;margin-top: 10rpx;">
				<div style="display: flex;flex-direction: row;align-items: center; flex-wrap: wrap;width: 100%;">
					<div v-for="(item,index) in cate" :key="index">
						<div>
							<img :src="item.picUrl" style="width: 150rpx;height: 150rpx;">
						</div>
						<div style="display: flex;justify-content: center;">
							{{item.name}}
						</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fuk:0,
				
				categoryList: [],
				cate: [],
				pic: [],
				zip: 1005000
			}
		},
		// 分类接口
		onLoad() {
			uni.request({
				url: 'http://47.91.230.137:8086/wx/catalog/index',
				success: (res) => {
					this.categoryList = res.data.data.categoryList
					this.cate = res.data.data.currentSubCategory
					// this.pic = res.data.data.currentCategory
					// this.pic =res.data.data.currentSubCategory
					// uni.getLocation({
					// 	url:'http://47.91.230.137:8086/wx/catalog/current?id='+this.categoryList[0].id,
					// 	success: (res) =>{
					// 		this.cate = res.data.data.currentSubCategory
					// 	}
					// })

					// this.cate = res.data.data.currentCategory
				}
			})
		},
		methods: {
			zz(id,index){
				this.zip=id
				this.fuk=index
				// uni.request({
				// 	url: 'http://47.91.230.137:8086/wx/catalog/current?id='+this.zip,
				// 	success: (res) => {
				// 		this.cate = res.data.data.currentSubCategory
				// 		}
				// })
				uni.request({
					url:'http://47.91.230.137:8086/wx/catalog/current?id='+this.zip,
					success: (res) =>{
						this.cate = res.data.data.currentSubCategory
						this.pic = res.data.data.currentCategory
					}
				})
		}
	}
}
</script>

<style>
.abc{
	border-left: 7rpx solid ;
	color: #ffaa00;
}
</style>

